<template>
  <div class="item-content func-item">
    <span class="func-name" :index="parentIndex" draggable @dragstart="handleDrag">
      {{ config.func_param.func_name }}
    </span>
    <span
      v-for="(item, index) in config.func_param.param"
      :key="index"
      :index="index"
      :class="{ 'func-tag': item.type_id == '1', 'func-num': item.type_id == '2' || item.type_id == '3' }"
    >
      <template v-if="item.type_id == '1'">
        <!-- 标签 -->
        <el-form-item
          :prop="formProp + '.func_param.param.' + index + '.param.lab_table'"
          :rules="[
            {
              required: true,
              message: '标签不能为空',
              trigger: 'change'
            }
          ]"
        >
          {{ item.param.tag_nm || '拖入标签' }}
        </el-form-item>
      </template>
      <template v-else-if="item.type_id == '2'">
        <!-- 数值 -->
        <el-form-item
          :prop="formProp + '.func_param.param.' + index + '.param.constant'"
          :rules="[
            {
              required: true,
              message: '数值不能为空',
              trigger: 'blur'
            }
          ]"
        >
          <el-input v-model="item.param.constant"></el-input>
        </el-form-item>
      </template>
      <template v-else-if="item.type_id == '3'">
        <!-- 选择单位 -->
        <el-form-item
          :prop="formProp + '.func_param.param.' + index + '.param.company'"
          :rules="[
            {
              required: true,
              message: '单位不能为空',
              trigger: 'change'
            }
          ]"
        >
          <el-select v-model="item.param.company" @change="changeCompany($event, index)">
            <el-option label="选择单位" value=""></el-option>
            <el-option
              v-for="(option, optionIndex) in item.param.company_list"
              :key="optionIndex"
              :label="option.show_company"
              :value="option.company"
            ></el-option>
          </el-select>
        </el-form-item>
      </template>
    </span>
  </div>
</template>

<script>
export default {
  props: {
    parentIndex: {
      type: Number,
      default: 0
    },
    formProp: {
      // 绑定form表单的prop名称
      type: String,
      required: true,
      default: 'editForm'
    },
    config: {
      type: Object,
      required: true,
      default: () => {}
    }
  },
  data() {
    return {}
  },
  methods: {
    handleDrag(event) {
      this.$emit('dragstart', event)
    },
    changeCompany(val, index) {
      const selections = this.config.func_param.param[index].param.company_list
      const target = selections.find(item => item.company === val)
      this.config.func_param.param[index].param.show_company = target.show_company
    }
  }
}
</script>

<style lang="scss"></style>
